今天想要分享一下我看 Youtube 看到的效果，
先分享連結，
裡面有使用到的 wave.png 請直接 YT 下載。

本篇關鍵字

• animation
• @keyframes
• background-position

範例檔

(背景圖片: Lenin Estrada from Unsplash)

HTML

<div class="banner"></div>

CSS

.banner {
  height: 500px;
  overflow: hidden;
  position: relative;
  background: url('https://images.unsplash.com/photo-1567644495368-82cb64d087f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80') no-repeat center center/cover;
}

.banner::before,
.banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(wave.png);
  background-position: 0 bottom;
  background-repeat: repeat-x;
  background-size: 1000px 100px;
}

.banner::before {
  animation: wave 8s linear infinite alternate;
  z-index: 2;
}

.banner::after {
  opacity: .5;
  animation: wave 8s 4s linear infinite alternate;
  z-index: 1;
}

@keyframes wave {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: 100%;
  }
}

喪屍分解

• 使用 ::before, ::after 搭配 position: absolute，製作蓋在圖上的波浪
• 利用 animation 設定 background-position 製作出波浪移動的效果
• animation

  animation: /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
  

• 透過 animation-delay 以及 opacity 做出波浪分層的效果

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是 Navbar。